<template>
  <view class="profile-page">
    <!-- 顶部背景和导航 -->
    <view class="header-section">
      <view class="nav-bar">
        <view class="back-btn" @click="goBack">
          <image class="back-icon" src="/static/back-icon.png" mode="aspectFit" />
        </view>
      </view>
      <image class="header-bg" :src="userInfo.background || '/static/profile-bg.png'" mode="aspectFill" />
    </view>

    <!-- 个人资料卡片 -->
    <view class="profile-card">
      <view class="profile-header">
        <image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill" />
        <view class="user-info">
          <view class="username">{{ userInfo.nickname || '用户名' }}</view>
          <view class="user-id">ID {{ userInfo.id || '00000' }}</view>
        </view>
        <view class="action-buttons">
          <view class="action-btn" @click="handleFollow">
            <image class="action-icon" :src="userInfo.isFollowed ? '/static/flow.png' : '/static/uflow.png'" mode="aspectFit" />
            <text class="action-text">{{ userInfo.isFollowed ? '已关注' : '关注TA' }}</text>
          </view>
          <view class="action-btn" @click="handleChat">
            <image class="action-icon" src="/static/chat.png" mode="aspectFit" />
            <text class="action-text">私聊TA</text>
          </view>
        </view>
      </view>
      <view class="stats-row">
        <view class="stat-item">
          <text class="stat-number">{{ userInfo.followCount || 0 }}</text>
          <text class="stat-label">关注</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-number">{{ userInfo.fansCount || 0 }}</text>
          <text class="stat-label">粉丝</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-number">{{ userInfo.likeCount || 0 }}</text>
          <text class="stat-label">获赞</text>
        </view>
      </view>
    </view>

    <!-- 导航标签 -->
    <view class="tabs-section">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="['tab-item', activeTab === index ? 'active' : '']"
        @click="switchTab(index)"
      >
        {{ tab }}
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-section">
      <view v-if="activeTab === 0 && currentUserId" class="moments-list">
        <CommunityList :userId="currentUserId" />
      </view>
      <view v-else-if="activeTab === 1" class="participated-list">
        <!-- 订单列表 -->
        <scroll-view 
          scroll-y 
          class="order-list"
          @scrolltolower="loadMoreOrders"
          :refresher-enabled="true"
          :refresher-triggered="refreshing"
          @refresherrefresh="refreshOrders"
        >
          <view 
            v-for="(order, index) in orderList" 
            :key="order.id" 
            class="buddy-card"
            @click="handleOrderClick(order)"
          >
            <!-- Top Section: Left (User Info) + Right (Buddy Details) -->
            <view class="top-section">
              <!-- Left: User Info -->
              <view class="user-info">
                <image :src="order.avatar" class="avatar"></image>
                <view class="user-details">
                  <text class="name">{{ order.name }}</text>
                  <view class="rating">
                    <image src="/static/huo.png" class="rating-icon" mode="aspectFit"></image>
                    <text>{{ order.rating }}</text>
                  </view>
                </view>
              </view>

              <!-- Right: Buddy Details -->
              <view class="buddy-details">
                <view class="detail-header">
                  <view class="title-wrapper">
                    <text class="title">{{ order.title }}</text>
                    <text class="buddy-type-name">{{ order.tag }}</text>
                  </view>
                  <view
                    :class="['status-tag', `status-${order.status}`]"
                    :style="getStatusStyle(order.status)"
                  >
                    {{ getStatusText(order.status) }}
                  </view>
                </view>
                <view class="detail-row">
                  <image src="/static/time.png" class="detail-icon" mode="aspectFit"></image>
                  <text>{{ order.eventTime }}</text>
                </view>
                <view class="detail-row">
                  <image src="/static/location-small.png" class="detail-icon" mode="aspectFit"></image>
                  <text>{{ order.location }}</text>
                </view>
                <view class="detail-row detail-tags">
                  <view class="detail-tag">{{ order.genderRestriction }}</view>
                  <view class="detail-tag" v-if="order.duration">{{ order.duration }}</view>
                  <view class="detail-tag" v-if="order.distance">距离{{ order.distance }}</view>
                </view>
              </view>
            </view>

            <!-- Images Section -->
            <view class="buddy-images" v-if="order.images && order.images.length > 0">
              <image v-for="(img, index) in order.images" :key="index" :src="img" class="buddy-image" mode="aspectFill"></image>
            </view>

            <!-- Footer Section -->
            <view class="card-footer">
              <view class="participants">
                <view class="participant-avatars" v-if="order.participants && order.participants.length">
                  <image
                    v-for="(pAvatar, index) in order.participants"
                    :key="`${pAvatar}-${index}`"
                    :src="pAvatar"
                    class="participant-avatar"
                    mode="aspectFill"
                  />
                  <view v-if="order.hasMoreParticipants" class="participant-more">…</view>
                </view>
                <text class="participant-count" v-if="order.participantsCount > 0">
                  已有{{ order.participantsCount }}人参与
                </text>
                <text class="participant-count" v-else>暂无人参与</text>
              </view>
              <view class="action-section">
                <text class="price">¥{{ order.price }}</text>
              </view>
            </view>
          </view>
          
          <!-- 加载状态 -->
          <view v-if="loadingOrders" class="loading-tip">加载中...</view>
          <view v-else-if="orderList.length === 0 && !loadingOrders" class="empty-tip">暂无参与的订单</view>
          <view v-else-if="noMoreOrders && orderList.length > 0" class="loading-tip">没有更多了</view>
        </scroll-view>
      </view>
      <view v-else class="reviews-list">
        <view class="empty-tip">TA的评价</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import CommunityList from '@/pages/index/components/CommunityList.vue'
import BuddyApi from '@/sheep/api/member/buddy'

const userInfo = ref({
  id: '',
  nickname: '',
  avatar: '',
  background: '',
  followCount: 0,
  fansCount: 0,
  likeCount: 0,
  isFollowed: false
})

const activeTab = ref(0)
const tabs = ['TA的朋友圈', 'TA参与的', 'TA的评价']
const currentUserId = ref('')

// 订单列表相关
const orderList = ref([])
const loadingOrders = ref(false)
const refreshing = ref(false)
const pageNo = ref(1)
const pageSize = ref(10)
const noMoreOrders = ref(false)

// 切换标签
const switchTab = (index) => {
  activeTab.value = index
  if (index === 1) {
    // 切换到"TA参与的"时加载订单列表
    loadOrders(true)
  }
}


// 格式化日期时间
const formatDateTime = (time) => {
  if (!time) return '--'
  try {
    const date = new Date(time)
    if (Number.isNaN(date.getTime())) {
      return typeof time === 'string' ? time : '--'
    }
    const month = date.getMonth() + 1
    const day = date.getDate()
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    return `${month}月${day}日 ${hours}:${minutes}`
  } catch (err) {
    console.error('formatDateTime error:', err)
    return typeof time === 'string' ? time : '--'
  }
}

// 格式化活动时间
const formatEventTime = (time) => {
  if (!time) return '待定'
  try {
    const date = new Date(time)
    if (Number.isNaN(date.getTime())) {
      return typeof time === 'string' ? time : '待定'
    }
    const month = date.getMonth() + 1
    const day = date.getDate()
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    return `${month}月${day}日 ${hours}:${minutes}`
  } catch (err) {
    console.error('formatEventTime error:', err)
    return typeof time === 'string' ? time : '待定'
  }
}

// 格式化性别限制
const formatGenderLimit = (genderLimit) => {
  if (genderLimit === 1 || genderLimit === '1') return '仅限男生'
  if (genderLimit === 2 || genderLimit === '2') return '仅限女生'
  return '男女不限'
}

// 格式化距离
const formatDistance = (distance) => {
  if (distance === null || distance === undefined || distance === '') return '--'
  const value = Number(distance)
  if (Number.isNaN(value)) {
    return typeof distance === 'string' ? distance : '--'
  }
  if (value < 1000) {
    return `${Math.round(value)}m`
  }
  return `${(value / 1000).toFixed(1)}km`
}

// 我参与的订单状态映射
const normalizeParticipatedStatus = (status) => {
  if (status === null || status === undefined) return 'pending_start'
  const numeric = Number(status)
  if (!Number.isNaN(numeric)) {
    if (numeric === 0) return 'pending_start'
    if (numeric === 1) return 'in_progress'
    if (numeric === 2) return 'rejected'
    if (numeric === 3) return 'cancelled'
    if (numeric === 4) return 'pending_confirm'
    if (numeric === 5) return 'completed'
    if (numeric === 6) return 'pending_review'
  }
  const value = String(status).toLowerCase()
  if (['pending_start', 'waiting_start', 'not_started'].includes(value)) return 'pending_start'
  if (['in_progress', 'processing', 'ongoing', 'running', 'doing'].includes(value)) return 'in_progress'
  if (['rejected', 'reject', 'refused', 'denied'].includes(value)) return 'rejected'
  if (['cancelled', 'canceled', 'closed', 'void'].includes(value)) return 'cancelled'
  if (['pending_confirm', 'waiting_confirm', 'pending_confirmation'].includes(value)) return 'pending_confirm'
  if (['completed', 'finished', 'done', 'success', 'succeed'].includes(value)) return 'completed'
  if (['pending_review', 'waiting_review', 'pending_comment', 'waiting_comment'].includes(value)) return 'pending_review'
  return 'pending_start'
}

// 格式化时长
const formatDuration = (minutes) => {
  if (!minutes) return ''
  if (minutes < 60) {
    return `${minutes}分钟`
  }
  const hours = Math.floor(minutes / 60)
  const mins = minutes % 60
  if (mins === 0) {
    return `${hours}小时`
  }
  return `${hours}小时${mins}分钟`
}

// 转换订单数据
const transformOrder = (item = {}) => {
  const acceptUsers = Array.isArray(item.acceptUsers) ? item.acceptUsers : []
  const participantAvatars = acceptUsers
    .map(user => (user && user.avatar) ? user.avatar : '/static/avatars/default_avatar.png')
    .filter(Boolean)
  const participants = participantAvatars.slice(0, 5)

  const status = normalizeParticipatedStatus(item.status)

  return {
    id: item.id,
    avatar: item.publisherAvatar || '/static/avatars/default_avatar.png',
    name: item.publisherNickname || '匿名用户',
    rating: item.publisherRating || 0,
    title: item.title || '',
    tag: item.buddyTypeName || item.buddyType || '搭子',
    status: status,
    publishTime: formatDateTime(item.publishTime || item.createTime || item.updateTime),
    eventTime: formatEventTime(item.startTime || item.appointmentTime),
    location: item.location || item.address || '',
    genderRestriction: formatGenderLimit(item.genderLimit),
    duration: formatDuration(item.duration),
    participantCount: item.participantCount ?? item.maxParticipants ?? acceptUsers.length,
    participantsCount: acceptUsers.length,
    distance: formatDistance(item.distance),
    images: item.images || [],
    participants,
    hasMoreParticipants: participantAvatars.length > 5,
    price: item.unitPrice || item.price || 0,
    raw: item
  }
}

// 提取订单列表
const extractOrderList = (response) => {
  if (!response) return []
  if (Array.isArray(response.data)) return response.data
  if (response.data && Array.isArray(response.data.list)) return response.data.list
  if (Array.isArray(response.list)) return response.list
  if (response.data && Array.isArray(response.data.records)) return response.data.records
  return []
}


// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'pending_start': '待开始',
    'in_progress': '进行中',
    'rejected': '已被拒绝',
    'cancelled': '已取消',
    'pending_confirm': '待发布人确认',
    'completed': '已完成',
    'pending_review': '待评价'
  }
  return statusMap[status] || '未知'
}

// 获取状态样式
const getStatusStyle = (status) => {
  const styleMap = {
    'pending_start': 'linear-gradient(90deg, #B276FF 0%, #74A7FF 41%, rgba(116, 167, 255, 0) 96%)',
    'in_progress': 'linear-gradient(90deg, #EE1C1C 0%, #FFB96F 67%, rgba(255, 185, 111, 0) 96%)',
    'rejected': 'linear-gradient(90deg, #9E9E9E 0%, #BDBDBD 50%, rgba(158, 158, 158, 0) 96%)',
    'cancelled': 'linear-gradient(90deg, #9E9E9E 0%, #BDBDBD 50%, rgba(158, 158, 158, 0) 96%)',
    'pending_confirm': 'linear-gradient(90deg, #FF9800 0%, #FFB74D 50%, rgba(255, 183, 77, 0) 96%)',
    'completed': 'linear-gradient(90deg, #4CAF50 0%, #81C784 50%, rgba(76, 175, 80, 0) 96%)',
    'pending_review': 'linear-gradient(90deg, #2196F3 0%, #64B5F6 50%, rgba(33, 150, 243, 0) 96%)'
  }
  return {
    background: styleMap[status] || 'linear-gradient(90deg, #B276FF 0%, #74A7FF 41%, rgba(116, 167, 255, 0) 96%)'
  }
}

// 加载订单列表
const loadOrders = async (reset = false) => {
  if (!currentUserId.value) {
    return
  }
  
  if (reset) {
    pageNo.value = 1
    noMoreOrders.value = false
    orderList.value = []
  }
  
  if (loadingOrders.value || noMoreOrders.value) {
    return
  }
  
  loadingOrders.value = true
  try {
    const params = {
      pageNo: pageNo.value,
      pageSize: pageSize.value
    }
    
    const res = await BuddyApi.getUserAcceptedOrders(currentUserId.value, params)
    
    if (res && res.code === 0) {
      const newOrders = extractOrderList(res).map(item => transformOrder(item))
      
      if (reset) {
        orderList.value = newOrders
      } else {
        orderList.value = [...orderList.value, ...newOrders]
      }
      
      // 判断是否还有更多数据
      if (newOrders.length < pageSize.value) {
        noMoreOrders.value = true
      } else {
        pageNo.value += 1
      }
    } else {
      uni.showToast({
        title: res?.msg || '加载订单失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('加载订单失败:', error)
    uni.showToast({
      title: '加载订单失败，请重试',
      icon: 'none'
    })
  } finally {
    loadingOrders.value = false
    refreshing.value = false
  }
}

// 加载更多
const loadMoreOrders = () => {
  if (!loadingOrders.value && !noMoreOrders.value) {
    loadOrders(false)
  }
}

// 刷新订单
const refreshOrders = () => {
  refreshing.value = true
  loadOrders(true)
}

// 点击订单
const handleOrderClick = (order) => {
  // 跳转到订单详情或搭子详情
  uni.navigateTo({
    url: `/pages/buddy/detail?id=${order.id}`
  })
}

// 返回
const goBack = () => {
  uni.navigateBack()
}

// 关注/取消关注
const handleFollow = async () => {
  // 检查是否有用户ID
  if (!currentUserId.value) {
    uni.showToast({ 
      title: '用户信息错误', 
      icon: 'none' 
    })
    return
  }
  
  try {
    const FollowApi = (await import('@/sheep/api/member/follow')).default
    
    if (userInfo.value.isFollowed) {
      // 取消关注
      const res = await FollowApi.deleteFollow(currentUserId.value)
      
      if (res && res.code === 0) {
        // 更新关注状态
        userInfo.value.isFollowed = false
        // 更新关注数
        userInfo.value.followCount = Math.max(0, (userInfo.value.followCount || 0) - 1)
      }
    } else {
      // 关注
      const res = await FollowApi.createFollow(currentUserId.value)
      
      if (res && res.code === 0) {
        // 更新关注状态
        userInfo.value.isFollowed = true
        // 更新关注数
        userInfo.value.followCount = (userInfo.value.followCount || 0) + 1
      }
    }
  } catch (error) {
    console.error('操作失败:', error)
    uni.showToast({ 
      title: userInfo.value.isFollowed ? '取消关注失败' : '关注失败', 
      icon: 'none' 
    })
  }
}

// 私聊
const handleChat = () => {
  uni.showToast({
    title: '暂未开放',
    icon: 'none'
  })
}

// 加载用户信息
const loadUserInfo = async (userId) => {
  try {
    const UserApi = (await import('@/sheep/api/member/user')).default
    
    let res
    if (userId) {
      // 如果有userId，调用获取指定用户信息的接口
      res = await UserApi.getUserProfile(userId)
    } else {
      // 如果没有userId，获取当前登录用户信息
      res = await UserApi.getUserInfo()
    }
    
    if (res && res.code === 0 && res.data) {
      const d = res.data
      const userIdValue = d.id || userId || ''
      currentUserId.value = userIdValue
      userInfo.value = {
        id: userIdValue,
        nickname: d.nickname || d.username || '用户',
        avatar: d.avatar || '/static/default-avatar.png',
        background: d.momentsCover || d.background || '/static/profile-bg.png',
        followCount: d.followCount || 0,
        fansCount: d.fansCount || 0,
        likeCount: d.totalLikeCount || 0,
        isFollowed: d.isFollowed || false
      }
      
      // 如果查看的是其他用户的主页，检查是否已关注
      if (userId && userIdValue) {
        try {
          const FollowApi = (await import('@/sheep/api/member/follow')).default
          const followRes = await FollowApi.checkFollow(userIdValue)
          
          if (followRes && followRes.code === 0 && followRes.data !== undefined) {
            userInfo.value.isFollowed = !!followRes.data
          }
        } catch (followError) {
          // 如果检查关注状态失败（可能是未登录），保持原有状态
          console.log('检查关注状态失败:', followError)
        }
      }
    }
  } catch (error) {
    console.error('加载用户信息失败:', error)
    uni.showToast({
      title: '加载用户信息失败',
      icon: 'none'
    })
  }
}

// 监听 currentUserId 变化，自动加载订单
watch(currentUserId, (newUserId) => {
  if (newUserId && activeTab.value === 1) {
    loadOrders(true)
  }
})

// 监听 activeTab 变化
watch(activeTab, (newTab) => {
  if (newTab === 1 && currentUserId.value) {
    loadOrders(true)
  }
})

onLoad((options) => {
  if (options && options.userId) {
    loadUserInfo(options.userId)
  } else {
    // 如果没有传userId，加载当前用户信息
    loadUserInfo()
  }
})
</script>

<style lang="scss" scoped>
.profile-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 40rpx;
}

// 顶部背景区域
.header-section {
  position: relative;
  width: 100%;
  height: 500rpx;
  overflow: hidden;
  
  .nav-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 20rpx 30rpx;
    padding-top: calc(20rpx + env(safe-area-inset-top));
    
    .back-btn {
      width: 100rpx;
      height: 150rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .back-icon {
        width: 100rpx;
        height: 100rpx;
        filter: brightness(0) invert(1);
      }
    }
  }
  
  .header-bg {
    width: 100%;
    height: 100%;
  }
}

// 个人资料卡片
.profile-card {
  position: relative;
  margin: -100rpx 30rpx 0 30rpx;
  background: linear-gradient(0deg, #FFFFFF 44%, #DEE9FF 84%, #ACCAFF 106%);
  border-radius: 24rpx;
  padding: 40rpx 30rpx 40rpx 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  z-index: 5;
  
  .profile-header {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    
    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 24rpx;
    }
    
    .user-info {
      flex: 1;
      
      .username {
        font-size: 36rpx;
        font-weight: bold;
        color: #222;
        margin-bottom: 8rpx;
      }
      
      .user-id {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .action-buttons {
      display: flex;
      flex-direction: row;
      gap: 52rpx;
      margin-right: 30rpx;
      
      .action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rpx;
        
        .action-icon {
          width: 48rpx;
          height: 48rpx;
        }
        
        .action-text {
          font-size: 22rpx;
          color: #666;
        }
      }
    }
  }
  
  .stats-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-top: 30rpx;
    border-top: 1rpx solid #f0f0f0;
    
    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8rpx;
      
      .stat-number {
        font-size: 32rpx;
        font-weight: bold;
        color: #222;
      }
      
      .stat-label {
        font-size: 24rpx;
        color: #222;
      }
    }
    
    .stat-divider {
      width: 1rpx;
      height: 40rpx;
      background: #e0e0e0;
    }
  }
}

// 导航标签
.tabs-section {
  display: flex;
  background: transparent;
  margin: 30rpx 30rpx 0 30rpx;
  padding: 0 20rpx;
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 24rpx 0;
    font-size: 28rpx;
    color: #666;
    position: relative;
    
    &.active {
      color: #222;
      font-weight: bold;
    }
  }
}

// 内容区域
.content-section {
  margin-top: 20rpx;
  padding: 0 30rpx;
  
  .moments-list {
    .moment-item {
      background: #fff;
      border-radius: 20rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
      
      .moment-header {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        
        .moment-avatar {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          margin-right: 16rpx;
        }
        
        .moment-username {
          flex: 1;
          font-size: 28rpx;
          font-weight: 500;
          color: #222;
        }
        
        .moment-date {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .moment-content {
        font-size: 28rpx;
        color: #333;
        line-height: 1.6;
        margin-bottom: 20rpx;
      }
      
      .moment-media {
        margin-bottom: 20rpx;
        
        .moment-image {
          width: 100%;
          max-height: 500rpx;
          border-radius: 12rpx;
          margin-bottom: 12rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
        }
        
        .moment-video {
          position: relative;
          width: 100%;
          border-radius: 12rpx;
          overflow: hidden;
          
          .video-thumbnail {
            width: 100%;
            height: 400rpx;
          }
          
          .play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100rpx;
            height: 100rpx;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            
            .play-icon {
              width: 60rpx;
              height: 60rpx;
            }
          }
        }
      }
      
      .moment-actions {
        display: flex;
        align-items: center;
        gap: 40rpx;
        padding-top: 20rpx;
        border-top: 1rpx solid #f0f0f0;
        
        .action-item {
          display: flex;
          align-items: center;
          gap: 8rpx;
          
          .action-icon-small {
            width: 32rpx;
            height: 32rpx;
          }
          
          .action-count {
            font-size: 24rpx;
            color: #666;
          }
        }
      }
    }
  }
  
  .empty-tip {
    text-align: center;
    padding: 100rpx 0;
    color: #999;
    font-size: 28rpx;
  }
  
  // TA参与的订单列表样式（参考搭子页面）
  .participated-list {
    .order-list {
      height: calc(100vh - 600rpx);
      padding: 20rpx 0 40rpx 0;
      box-sizing: border-box;
      
      .buddy-card {
        background-color: #fff;
        border-radius: 16rpx;
        margin-bottom: 20rpx;
        padding: 20rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
        cursor: pointer;

        .top-section {
          display: flex;
          align-items: flex-start;
          margin-bottom: 20rpx;
          gap: 20rpx;
        }

        .user-info {
          display: flex;
          flex-direction: column;
          align-items: center;
          flex-shrink: 0;
          width: 120rpx;

          .avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin-bottom: 10rpx;
            flex-shrink: 0;
          }

          .user-details {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            
            .name {
              font-size: 26rpx;
              color: #333;
              margin-bottom: 8rpx;
              text-align: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 100%;
            }
            .rating {
              display: flex;
              align-items: center;
              font-size: 22rpx;
              color: #ED483D;
              .rating-icon {
                width: 28rpx;
                height: 28rpx;
                margin-right: 6rpx;
              }
            }
          }
        }

        .buddy-details {
          flex: 1;
          min-width: 0;
          margin-bottom: 0;
          text-align: left;

          .detail-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10rpx;
            gap: 10rpx;
          }
          
          .title-wrapper {
            display: flex;
            align-items: center;
            flex: 1;
            min-width: 0;
          }

          .title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
          }
          
          .buddy-type-name {
            font-size: 24rpx;
            color: #F18F10;
            background-color: rgba(252, 231, 152, 0.42);
            padding: 4rpx 12rpx;
            border-radius: 8rpx;
            margin-left: 8rpx;
            flex-shrink: 0;
          }

          .status-tag {
            padding: 6rpx 12rpx;
            border-radius: 20rpx;
            font-size: 22rpx;
            color: #fff;
            white-space: nowrap;
            flex-shrink: 0;
          }

          .detail-row {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 24rpx;
            color: #666;
            margin-bottom: 6rpx;
            text-align: left;
            .detail-icon {
              width: 24rpx;
              height: 24rpx;
              margin-right: 6rpx;
              flex-shrink: 0;
            }
            text {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: left;
              max-width: 100%;
            }
            &.detail-tags {
              gap: 10rpx;
              flex-wrap: wrap;
            }
          }
          
          .detail-tag {
            background-color: #F6F6F8;
            color: #666;
            font-size: 24rpx;
            padding: 6rpx 12rpx;
            border-radius: 20rpx;
            white-space: nowrap;
          }
        }

        .buddy-images {
          display: flex;
          flex-wrap: wrap;
          gap: 10rpx;
          margin-bottom: 20rpx;

          .buddy-image {
            width: calc(33.33% - 7rpx);
            height: 180rpx;
            border-radius: 10rpx;
            object-fit: cover;
          }
        }

        .card-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: linear-gradient(90deg, #DCEAFA 0%, #E6E4FF 35%, rgba(220, 234, 250, 0) 69%);
          padding: 8rpx 16rpx;
          border-radius: 16rpx;

          .participants {
            display: flex;
            align-items: center;

            .participant-avatars {
              display: flex;
              align-items: center;
              position: relative;

              .participant-avatar {
                width: 44rpx;
                height: 44rpx;
                border-radius: 50%;
                border: 2rpx solid #fff;
                margin-left: -12rpx;

                &:first-child {
                  margin-left: 0;
                }
              }

              .participant-more {
                width: 44rpx;
                height: 44rpx;
                border-radius: 50%;
                background-color: rgba(0, 0, 0, 0.1);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24rpx;
                color: #666;
                margin-left: -12rpx;
                border: 2rpx solid #fff;
              }
            }

            .participant-count {
              font-size: 24rpx;
              color: #999;
              margin-left: 16rpx;
            }
          }

          .action-section {
            display: flex;
            align-items: center;

            .price {
              font-size: 32rpx;
              font-weight: bold;
              color: #ED483D;
              margin-right: 16rpx;
            }
          }
        }
      }
      
      .loading-tip {
        text-align: center;
        padding: 40rpx 0;
        color: #999;
        font-size: 24rpx;
      }
    }
  }
}
</style>

